<template lang="pug">
  div.reportCardsBox
    div.reportCards
      div.row(id="pdfDom" ref="pdfDom" style="height: 100%;padding: 20px;box-sizing: border-box;")
        div.reportHead(style="height: 100%;")
          <!--button(type="button" v-on:click="getBase64Pdf()") 导出PDF-->
          div.reportHeadTitle.borBlack
            img(:src="patientMessage.hospitalLogo" crossorigin="anonymous")
            h1
              span(style="font-family: '楷体';font-size:24px;line-height: 43px;margin-top:3px") {{patientMessage.hospitalNameExpert}}
              span(style="font-family: '宋体';font-size:28px;margin-bottom:8px") 病理会诊报告单
            p.consultation
              span.bold-title 会 诊 号：
              span(style="font-size:16px;font-weight: bold;") {{patientMessage.number}}
          div.patientMessageBox.borBlack.clearfix
            div.patientMessage.w-30
              span.bold-title 姓名：
              span {{patientMessage.name}}
            div.patientMessage.w-40
              span.bold-title 年龄：
              span {{patientMessage.age}}
            div.patientMessage.w-30
              span.bold-title 性别：
              span {{patientMessage.sex}}
            div.patientMessage.w-30
              span.bold-title 申请医师：
              span {{patientMessage.doctor}}
            div.patientMessage.w-40
              span.bold-title 申请单位：
              span {{patientMessage.hospitalName}}
            div.patientMessage.w-30
              span.bold-title 病历号：
              span {{patientMessage.pathologyNum}}
            div.patientMessage.w-30
              span.bold-title 切片类型：
              span {{patientMessage.className}}
            div.patientMessage.w-40
              span.bold-title 临床诊断：
              span {{patientMessage.diagnosis}}
            div.patientMessage.w-30
              span.bold-title 会诊日期：
              span {{patientMessage.date}}
          div.consultMessageBox.borBlack
            h2 光镜所见：
            div.grid
              img.consultImg(v-for="item in imgSrcArr" :class="{ item_1: imgSrcArr.length === 1, item_2: imgSrcArr.length === 2, item_3: imgSrcArr.length === 3, item_4: imgSrcArr.length === 4, item_5: imgSrcArr.length === 5, item_6: imgSrcArr.length > 5}" :src="item" ref="imgArr")
          div.consultMessageBox.borBlack
            h2 会诊意见：
            <!--p.diagnose {{patientMessage.opinion}}-->
            el-input(v-model="patientMessage.opinion" readonly type="textarea" resize="none" :rows="10").elTearea
            img.consultSeal(:src="patientMessage.unitseal")
          div.reportFooter.clearfix
            div.specia.bold-title 会诊医师：
              img.signature(:src="patientMessage.personalseal")
            div.consultTime
              span.bold-title 报告时间：
              span {{patientMessage.applicationTime}}
          div.remark
            span 备注:
            span.remarkTwo 本病理会诊报告基于所借阅切片做出诊断，未参考详细临床病史和大体标本诊断，仅供临床医生和原出片单位病理医生参考。
    div.reportCardsBtnBox
      el-button(type="info" v-print="'#pdfDom'") 下载
        i.el-icon-download.el-icon--right
</template>

<script>
  export default {
    name: 'reportCards',
    data() {
      return {
        patientMessage: {
          // 患者信息
          name: '', // 姓名
          age: '', // 年龄
          sex: '男', // 性别
          doctor: '', // 申请医师
          hospitalName: '', // 申请单位
          pathologyNum: '', // 病理号
          className: '', // 切片类型
          diagnosis: '', // 临床诊断
          date: '2020-03-03', // 会诊日期
          // 专家信息
          hospitalNameExpert: '', // 会诊医院
          hospitalLogo: '', // 会诊医院Logo
          number: '', // 会诊号
          picture: [], // 光镜所见
          diagnosisDetail: '', // 会诊诊断'
          unitseal: '', // 会诊医院印章
          personalseal: '', // 会诊专家签名
          applicationTime: '' // 报告时间
        },
        fid: null,
        imgSrcArr: []
      }
    },
    mounted() {
      // this.getBase64Imgs(this.patientMessage)
      // 页面渲染完成获取相关数据
      this.getPrintData()
      setTimeout(() => {
        this.getReport()
      }, 500)
    },
    methods: {
      getBase64Imgs(img) {
        let canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        let ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0, img.width, img.height)
        let ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
        let imgUrl = canvas.toDataURL('image/' + ext)
        return imgUrl
      },
      // createImg(img) {
      //   console.log('------img------', img)
      //   let image = new Image()
      //   image.crossOrigin = ''
      //   image.src = img
      //   image.onload = () => {
      //     this.getBase64Imgs(image)
      //   }
      // },
      getPrintData() {
        let printData = JSON.parse(this.$route.query.reportData)
        let imgArr = []
        imgArr.push(printData.hospitalLogo)
        imgArr.push(printData.picture)
        imgArr.push(printData.unitseal)
        imgArr.push(printData.personalseal)
        // imgArr.forEach((item, i) => {
        let image = new Image()
        image.crossOrigin = ''
        image.src = printData.hospitalLogo
        image.onload = () => {
          printData.hospitalLogo = this.getBase64Imgs(image)
          // let img1 = new Image()
          // img1.crossOrigin = ''
          // img1.src = printData.picture
          // img1.onload = () => {
          //   console.log('img1', img1)
          //   printData.picture = this.getBase64Imgs(img1)
          let img2 = new Image()
          img2.crossOrigin = ''
          img2.src = printData.unitseal
          img2.onload = () => {
            printData.unitseal = this.getBase64Imgs(img2)
            let img3 = new Image()
            img3.crossOrigin = ''
            img3.src = printData.personalseal
            img3.onload = () => {
              printData.personalseal = this.getBase64Imgs(img3)
              this.patientMessage = printData
              let imgArrar = printData.picture.split(',')
              if (printData.sex === '1') {
                this.patientMessage.sex = '男'
              } else {
                this.patientMessage.sex = '女'
              }
              // return new Promise((resolve, reject) => {
              for (var i = 0; i < imgArrar.length; i++) {
                let img = new Image()
                img.crossOrigin = ''
                img.src = imgArrar[i]
                img.onload = () => {
                  let imgsrc = this.getBase64Imgs(img)
                  this.imgSrcArr.push(imgsrc)
                }
              }
            }
          }
        }
      },
      // // 页面导出PDF功能
      // getBase64Pdf() {
      //   // let _this = this
      //   // let pdfDom = _this.$refs.pdfDom
      //   // _this.getPdf(pdfDom)
      //   this.axios.request({
      //     method: 'PUT',
      //     url: '/camel/rest/telemedicine/files/' + this.patientMessage.fid + '/updateStatus',
      //     params: {
      //       // id: item.id
      //       id: this.patientMessage.fid
      //     }
      //   })
      //   this.axios.request({
      //     method: 'GET',
      //     url: '/camel/rest/telemedicine/reports/updateStatus',
      //     params: {
      //       id: this.patientMessage.id
      //     }
      //   })
      // },
      // 获取报告单数据
      getReport() {
        this.$http.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/reports/{id}',
          params: {
            id: this.$route.query.forumId
          }
        }).then(res => {
          // let _data = res.data.data[0]
          // console.log('------total------', _data)
          // this.total = _data
        })
      }
    }
  }
</script>

<style scoped lang="stylus">
  *
    font-family '宋体'
  .clearfix
    zoom 1

  .clearfix:after
    clear both
    display block
    visibility hidden
    height 0
    line-height 0
    content ''

  .reportCardsBox
    background-color rgba(0, 0, 0, 0.2)
    width 100%
    height 100%
    overflow auto

  .reportCards
    background-color #fff
    width 780px
    height 100%
    margin 0 auto
    /*padding 40px*/
    box-sizing border-box

  .borBlack
    border-bottom 2px solid #000

  .reportHeadTitle
    position relative

  .reportHeadTitle img
    width 94px
    height auto
    display block
    position absolute
    margin-left 6%

  .reportHeadTitle h1 span
    display block
    text-align center
    font-size 20px

  .consultation
    font-size 14px
    text-align right
    margin 0 6% 6px 6%
    font-family '宋体'

  /*.patientMessageBox*/
  /*  padding 10px 0*/

  .patientMessage
    padding-left 1%
    box-sizing border-box
    font-size 14px
    line-height 30px

  .w-30
    width 28%
    float left

  .w-40
    width 44%
    float left

  .consultMessageBox
    padding 10px 0
    height 30%
    position relative

  .grid /*display grid
    grid-template-columns repeat(auto-fill, 80px)*/
    /*text-align center*/
    /*flex-wrap wrap*/
    text-align center
    height 90%
    margin-top 2%

  .consultImg
    /*max-width 200px*/
    margin 10px

  .item_1
    /*height 200px*/
    width 252px

  .item_2
    /*height 200px*/
    width 252px

  .item_3
    /*height 135px*/
    width 170px
    margin 6% 5px

  .item_4
    /*height 105px*/
    width 132px
    margin 6% 5px

  .item_5
    width 120px
    height 150px
    margin 5px 5px
    background-size cover

  .item_6
    width 80px
    height 80px
    margin 5px 5px
    background-size cover

  .consultMessageBox h2
    font-size 16px
    margin-left 1%

  .diagnose
    padding 10px 30px
    font-size 14px
    line-height 24px
    height 160px
    text-indent 2em

  .consultSeal
    width 140px
    position absolute
    bottom 10px
    right 30px

  .reportFooter .specia
    float left
    line-height 50px
    font-size 14px
    margin-left 30px

  .reportFooter .specia .signature
    height 70px
    display inline-block

  .reportFooter .consultTime
    float right
    line-height 50px
    font-size 14px
    margin-right 30px

  .reportCardsBtnBox
    position absolute
    top 30px
    right 100px

  .remark
    width 500px
    margin 10px auto 0 auto

    span
      display inline-block
      vertical-align top

    .remarkTwo
      width 440px
      margin-left 6px

  .bold-title
    font-weight bold

</style>

<style lang="stylus">
  .consultMessageBox .el-textarea__inner, textarea
    border none
    height 96%
    line-height 1.7
    padding-left 80px
    overflow hidden
    color #000

  .consultMessageBox .el-textarea
    height 90%
</style>
